<ion-header>
  <ion-toolbar class="menu-toggle-change-color">
    <ion-title>Ionic 5 BT-serial example</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
<!--  <ion-refresher *ngIf="showSpinner === false" slot="fixed" (ionRefresh)="refreshBluetooth($event)">
    <ion-refresher-content pullingIcon="circular"
    pullingText="Pull to refresh"
    refreshingSpinner="circles"
    refreshingText="{{ 'BLUETOOTH.SEARCHING' | translate }}">
    </ion-refresher-content>
  </ion-refresher>    -->

  <ion-card>
    <ion-card-header color="light"><ion-card-title>{{ "STATUS_TITLE" | translate }}</ion-card-title></ion-card-header>
    <ion-card-content>
      <span [hidden]="!isConnected"><p> {{ "CONNECTED_TO_STATUS" | translate }} {{ConnectedName}}</p></span>
      <span [hidden]="isConnected"><p>{{ "DISCONNECTED_STATUS" | translate }}</p></span>
      <span [hidden]="!isConnected">
        <ion-button expand="block" (click)="disconnect()" [disabled]="!isConnected">
          <ion-icon slot="start" name="flash-off"></ion-icon>{{ "DISCONNECT" | translate }}
        </ion-button>
      </span>
    </ion-card-content>
  </ion-card>

  <!-- Availabel devices -->
  <!-- <span [hidden]="isConnected">   -->
  <ion-card>
    <ion-card-header color="light"><ion-card-title>{{ "AVAILABLE_DEVICES_TITLE" | translate }}</ion-card-title></ion-card-header>
    <ion-card-content>
      <!--<h3>{{ "AVAILABLE_DEVICES" | translate }}</h3> -->
      <div [hidden]="showSpinner === false" class="ion-text-center">
        <ion-spinner></ion-spinner><br>
        {{ "BLUETOOTH.SEARCHING" | translate }}
      </div>
      <div [hidden]="devices.length > 0 || showSpinner == true" class="ion-text-center">
        <p>{{ "BLUETOOTH.NOT_FOUND" | translate }}</p>
      </div>
      <div [hidden]="devices.length == 0 || showSpinner == true" class="ion-text-center">
        <p>Tap on device to connect</p>
      </div>
      <ion-list lines="full">
        <ion-item button (click)="checkConnection(device)" *ngFor="let device of devices">
          <ion-text>
            <h4>{{ "BLUETOOTH.NAME" | translate }}: {{device.name}}</h4>
            <p>{{ "BLUETOOTH.ID" | translate }}: {{device.id}}</p>
    <!--          <p>{{ "BLUETOOTH.ADDRESS" | translate }}
              <span [hidden]="device.address == undefined">mac</span>
              <span [hidden]="device.uuid == undefined">uuid</span>
              {{device.address}} {{device.uuid}}
            </p>
          <p>
              <span [hidden]="device.class == undefined">Class</span>
              <span [hidden]="device.rssi == undefined">Rssi</span>
              {{device.class}} {{device.rssi}}
            </p>    -->
          </ion-text>
        </ion-item>
      </ion-list>
      <ion-button expand="block" (click)="scanBluetooth()" [disabled]="showSpinner">
        <ion-icon slot="start" name="search"></ion-icon>
        {{ "DEVICE_SCAN_BUTTON" | translate }}
      </ion-button>
    </ion-card-content>
  </ion-card>
  <!--</span>  -->

   <!--
    <ion-card>
    <ion-card-header><ion-card-title>{{ "SEND_MSG_TITLE" | translate }}</ion-card-title></ion-card-header>
    <ion-card-content>
      <form (ngSubmit)="sendMessage(message);">
        <ion-item>
          <ion-label color="primary" floating>Message</ion-label>
          <ion-input type="text" [(ngModel)]="message" name="message"></ion-input>
        </ion-item>
          <ion-button expand="block" type="submit" [disabled]="!isConnected">
            <ion-icon name="paper-plane" slot="start"></ion-icon>{{ "SEND" | translate }}
          </ion-button>
      </form>
    </ion-card-content>
  </ion-card>
  -->

  <ion-card>
    <ion-card-header color="light"><ion-card-title>{{ "SEND_MSG_TITLE" | translate }}</ion-card-title></ion-card-header>
    <ion-card-content>
      <form (ngSubmit)="sendData(datatosend);">
        <ion-item>
          <ion-label position="floating">Message</ion-label>
          <ion-input type="text" [(ngModel)]="datatosend" name="datatosend"></ion-input>
        </ion-item>
          <ion-button expand="block" type="submit" [disabled]="!isConnected">
            <ion-icon name="paper-plane" slot="start"></ion-icon>{{ "SEND" | translate }}
          </ion-button>
      </form>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header color="light"><ion-card-title>{{ "MSG_LIST_TITLE" | translate }}</ion-card-title></ion-card-header>
    <ion-card-content>
      <p><b>Sent messages list</b></p>
      <p *ngFor="let item of sentmessages">{{ item }}</p>
      <ion-button expand="block" (click)="clearSentList()">
        <ion-icon slot="start" name="trash"></ion-icon>DELETE LIST
      </ion-button>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header color="light"><ion-card-title>Received messages</ion-card-title></ion-card-header>
    <ion-card-content>
      <p><b>Received messages list</b></p>
      <p *ngFor="let item of receivedmessages">{{ item }}</p>
      <ion-button expand="block" (click)="clearRecievedList()">
        <ion-icon slot="start" name="trash"></ion-icon>DELETE LIST
      </ion-button>
    </ion-card-content>
  </ion-card>

  <ion-card>
    <ion-card-header color="light"><ion-card-title>Debug</ion-card-title></ion-card-header>
    <ion-card-content>
      <p><b>Debug messages list</b></p>
      <p *ngFor="let item of debugmessages">{{ item }}</p>
      <ion-button expand="block" (click)="clearDebugList()">
        <ion-icon slot="start" name="trash"></ion-icon>DELETE LIST
      </ion-button>
    </ion-card-content>
  </ion-card>

</ion-content>
